<template>
	<view class="main">
		<u-navbar :is-back="true" title="店铺信息" :background="background" :border-bottom="false" back-icon-color="#fff"
			title-color="#FFFFFF" title-bold="true"></u-navbar>
		<view class="background">
			<image src="../../../static/images/bj.png" mode=""></image>
		</view>
		<view class="num">
			<image :src="info.logo" mode=""></image>
			<text>{{info.address}}</text>
		</view>
		<view class="info">
			<view class="one">
				<text>营业资质</text>
				<image src="../../../static/images/zzzs.png" mode="" @click="license"></image>
			</view>
			<view class="phone">
				<view>
					外卖电话
				</view>
				<text>{{info.tel}}</text>
			</view>
			<view class="phone">
				<view>
					营业时间段
				</view>
				<text>上午:08:00-12:00 下午01:00-06:00</text>
			</view>
		</view>
		<view class="where">
			<view>
				配送范围
			</view>
			<text>我们以3公里为半径标注为准</text>
		</view>
		<view class="map">
			<!-- <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"> -->
			<map :latitude="info.lat" :longitude="info.lng" :circles="circles" show-location="true"
				enable-rotate="true" enable-traffic="true" :markers="markers">
			</map>
		</view>
		<u-popup v-model="liscenses" mode="center" border-radius="14">
			<view class="liscens">
				<image :src="info.yyzz" mode=""></image>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#E22222'
				},
				addrDel: {},
				info: {},
				liscenses: false,
				// id:0, // 使用, marker点击事件 需要填写id
				// 	title: 'map',
				// 	latitude: 39.909,
				// 	longitude: 116.39742,
				// 	covers: [{
				// 		latitude: 39.909,
				// 		longitude: 116.39742,
				// 		iconPath: '../../../static/location.png'
				// 	}, {
				// 		latitude: 39.90,
				// 		longitude: 116.39,
				// 		iconPath: '../../../static/location.png'
				// 	}]
				circles: [{
					latitude: '', //纬度
					longitude: '', //经度
					fillColor: '#9db0de6A ',
					radius: 100,
					strokeWidth: 2,
					color: '#00aaff'
				}],
				  markers: [{
				        // 标记点（iconPath图像路径,id应该无所谓 可以用来判断用户点击了哪个marker把,经纬度，还有图像高度、宽度）
				        iconPath: "../../../static/images/address.png",
				        id: 1,
				        latitude: "",
				        longitude: "",
				        height: 15,
						width:15
				      },
				]

			}
		},
		onLoad() {
			this.getinfo()
			// uni.login({
			// 	provider: 'weixin',
			// 	success: function(loginRes) {
			// 		console.log(loginRes.authResult);
			// 		// 获取用户信息
			// 		uni.getUserInfo({
			// 			provider: 'weixin',
			// 			success: function(infoRes) {
			// 				console.log('用户昵称为：' + infoRes.userInfo.nickName);
			// 			}
			// 		});
			// 	}
			// });
		},
		mounted() {},
		onShow() {},
		methods: {
			license() {
				this.liscenses = true
			},
			getinfo() {
				global.$http.request({
					url: '/api/shop/shop_profile',
					data: {
						token: uni.getStorageSync('token'),
						shop_id:  uni.getStorageSync('userinfo').shop_info.shop_id,
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.circles[0].latitude=res.data.data.lat
						this.circles[0].longitude=res.data.data.lng
						this.markers[0].latitude=res.data.data.lat
						this.markers[0].longitude=res.data.data.lng
					console.log(res.data.data);
					this.info=res.data.data
						setTimeout(function(){
							
						},2000)
					}
				})
			},
			// 		getaddress() {
			// 			var that = this
			// 			uni.getLocation({
			// 				type: 'wgs84',
			// 				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
			// 				success: function(res) {
			// 					console.log(res)
			// 					that.addrDel = res;
			// 					that.circles[0].latitude=res.latitude
			// 					that.circles[0].longitude=res.longitude
			// 			 },
			// 				fail: function() {
			// 					uni.showToast({
			// 						title: '获取地址失败，将导致部分功能不可用',
			// 						icon: 'none'
			// 					});
			// 				}
			// 			});
			// 			console.log("另一种");

			// 		}

		}
	}
</script>
<style lang="scss">
	page {
		font-family: Source Han Sans CN;
		width: 750rpx;
		margin: 0 auto;
		background-color: #f7f7f7;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.background {

				image {
					position: absolute;
					top: 80rpx;
					z-index: -10;
					width: 750rpx;
					height: 1334rpx;
				}
			}

			.num {
				background-color: #FFFFFF;
				width: 710rpx;
				margin: 0 auto;
				border-radius: 20rpx;
				display: flex;
				padding: 20rpx;

				image {
					width: 140rpx;
					height: 140rpx;
				}

				text {
					margin-left: 24rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
				}
			}

			.info {
				width: 710rpx;
				margin: 20rpx auto;
				// padding: 0 33rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.one {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 2rpx;
					padding: 33rpx;
					background: #FFFFFF;

					image {
						width: 40rpx;
						height: 40rpx;

					}


					text {
						width: 150rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #000000;
					}
				}

				.phone {
					background: #FFFFFF;
					padding: 33rpx;
					margin-bottom: 2rpx;
					display: flex;
					align-items: center;

					view {
						width: 150rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #000000;
					}

					text {
						font-size: 26rpx;
						font-weight: bold;
						color: #8A8A8A;
					}
				}


			}

			.where {
				width: 710px;
				margin: 20rpx;
				padding: 34rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				view {
					font-size: 26rpx;
					font-weight: bold;
					color: #000000;
				}

				text {
					display: block;
					padding-top: 29rpx;
					font-size: 26rpx;
					font-weight: bold;
					color: #8A8A8A;
				}
			}

			.map {
				width: 500rpx;
				margin: 60rpx auto;

				// border-radius: 100%;
				// overflow: hidden;
				map {
					width: 500rpx;
					height: 500rpx;
				}
			}

			.manpCenter {
				width: 48rpx;
				height: 77rpx;
				position: absolute;
				left: calc(50% - 24rpx);
				top: calc(50% - 77rpx); // 按道理是-38.5rpx，但是会比实际偏上一点，设置-77rpx视觉上比较符合实际
			}

			.liscens {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 500rpx;
					height: 500rpx;
				}
			}
		}
	}
</style>
